<template>
    <div>
        <breadcrumb :routerList="routerList"></breadcrumb>
        <!--搜索-->
        <div class="box">
            <el-row :gutter="15">
                <el-col :span="6">
                    <time-pick @timeArr="timePick"></time-pick>
                </el-col>
                <el-col :span="3">
                    <el-button type="primary" @click="searchBtn" icon="el-icon-search">检索</el-button>
                </el-col>
                <el-col :span="3">
                    <el-button type="primary" @click="exportExcel" icon="el-icon-download">导出</el-button>
                </el-col>
            </el-row>
        </div>

        <!--表格-->
        <el-table
                :data="list"
                :height="getWinHeight"
                style="width: 100%;"
                :cell-style="cellStyle"
                :header-cell-style = "headerStyle"
        >
            <el-table-column
                    prop="nickname"
                    label="店主微信"
            >
            </el-table-column>
            <el-table-column
                    prop="shop_name"
                    label="店铺名称"
            >
            </el-table-column>
            <el-table-column
                    prop="price"
                    label="分润金额"
            >
            </el-table-column>
        </el-table>
        <pagination :total="total" @currentPage="currentPage" @sizeChange="sizeChange"></pagination>
    </div>
</template>

<script>
    import breadcrumb from '../../components/breadcrumb'
    import timePick from '../../components/timePick'
    import pagination from '../../components/paginationSizeChange'

    export default {
        name: "memberFinancial",
        data(){
          return {
              routerList:[
                  {
                      name:'财务管理',
                      path:''
                  },
                  {
                      name:'小店分佣',
                      path:''
                  }
              ],
              list:[],
              total:0,
              timeArr:[]
          }
        },
        components:{
            breadcrumb,
            timePick,
            pagination
        },
        computed:{
            getWinHeight(){
                let winHeight = document.body.clientHeight;
                return winHeight - 260
            }
        },
        created(){
            this.getMemberFinancial()
        },
        methods:{
            timePick(val){
                // console.log(val);
                this.timeArr = val;
            },
            sizeChange(num){
                console.log(num);
                this.num = num;
                this.getMemberFinancial()
            },
            currentPage(page){
                this.page = page;
                this.getMemberFinancial()
            },
            //表格样式
            cellStyle(){
                // console.log(row, column, rowIndex, columnIndex);
                return 'text-align:center'
            },
            //表头样式
            headerStyle:function(){
                return {
                    textAlign:'center'
                }
            },
            searchBtn(){
                console.log(this.timeArr);
                this.getMemberFinancial()
            },
            exportExcel(){
                const header = ['店主微信','店铺名称','分润金额']
                let data = [];
                let list = this.list;
                for(let i in list){
                    let arr = [];
                    arr.push(list[i].nickname,list[i].shop_name,list[i].price);
                    data.push(arr)
                }
                let filename = '小店分润'
                this.$util.exportExcel01(header,filename,data)
            },
            async getMemberFinancial(){
                let res = await this.$Http.getMemberFinancial({
                    start_time:this.timeArr[0],
                    end_time:this.timeArr[1]
                })
                console.log(res);
                this.list = res;
            }
        }
    }
</script>

<style scoped>
    .box{
        width: 100%;
        height: 60px;
        background: white;
        margin: 20px 0;
        padding: 10px 10px;
        box-sizing: border-box;
        color:#aaa;
    }
</style>
